<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>vue.js登录表单tab切换代码</title>
	<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="app">
	<div class="login_warp">
		<div class="loginbox fl">
			<div class="login_header">
				<span class="active">账号登录</span>
				<span class="">快捷登录</span>
				<span class="">扫码登录</span>
			</div>
			<div class="login_content">
				<div class="Cbody_item" style="">
					<div class="form_item">
						<input type="text" name="fname" placeholder="用户名" value="admin">
					</div>
					<div class="form_item">
						<input type="password" name="fpassword" placeholder="密码">
					</div>
					<div class="form_item">
						<div class="fl"><input type="checkbox">记住密码</div>
						<div class="fr"><a href="javascript:;">找回密码</a></div>
					</div>
					<div class="clear"></div>
					<div class="form_item"><input type="submit" name="" value="登录"></div>
				</div>
				<div class="Cbody_item" style="display: none;">
					<div class="form_item"><input type="text" name="fname" placeholder="手机号"></div>
					<div class="form_item"><input type="password" name="fpassword" placeholder="验证码"></div>
					<div class="form_item"></div>
					<div class="clear"></div>
					<div class="form_item"><input type="submit" name="" value="登录"></div>
				</div>
				<div class="Cbody_item" style="display: none;">
					<div class="qcode"><img src="img/qcode.png" alt="二维码" width="160" height="160"></div>
					<div class="beizhu">打开手机客户端扫码注册</div>
				</div>
			</div>
		</div>
		<div class="loginrslider fl">
			<img src="img/dbg.png" alt="dbg">
		</div>
	</div>
</div>
<script type="text/javascript" src="js/html5shiv.min.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
	const app = new Vue({
		el: "#app",
		data: {
			cur: 0 //默认选中第一个tab
		}
	});
</script>
</body>
</html>